<link rel="stylesheet" href="/resource/kalendae/build/kalendae.css" type="text/css" charset="utf-8">
<script src="/resource/kalendae/build/kalendae.activity.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
/** 表格样式 **/
.kalendae {width:550px;margin:0px;}
.kalendae .k-calendar { width: 530px; }
.kalendae .k-title, .kalendae .k-header, .kalendae .k-days { width: 530px; }
.kalendae .k-title.k-disable-year-nav .k-btn-previous-month {left:105px;}
.kalendae .k-title.k-disable-year-nav .k-btn-next-month {right:110px;}
.kalendae .k-days span { background: #ddd; width: 70px; height: 70px; line-height: 20px; font-size:10px; text-align: left; padding:1px 0 0 5px; margin-left: 4px; }
.kalendae .k-days span.k-in-month.k-active {color: #1dd697;}
.kalendae .k-days span.k-today {text-decoration: none;}
.kalendae .k-days span.k-in-month.k-active:hover {border:1px solid #1dd697;}
.kalendae .k-days span.k-in-month.k-active.k-selected {color: #1dd697;border:1px solid #1dd697;background: url('/resource/www/imgs/selected-icon.png') 50px 50px no-repeat;background-size: 20px;background-color: #fff;}
.kalendae .k-days .k-in-month.k-active em.left-order {float:right;margin-left:1px;}

.kalendae .k-header span {  width: 70px; height: 40px; line-height: 40px; text-align: center; padding:0;margin-left:4px}

.kalendae .k-caption {  font-weight: bold; font-size: 18px;   color: #262626;}

.proinfo-left-bottom {  width: 550px; margin:20px;}
.proinfo-left-bottom .datebox {  width: 550px;}

.kalendae .k-days span.k-in-month { background: #fff; color: #444; }
.kalendae .k-days span.k-out-of-month {color:#fff;background-color:#ddd;}
.kalendae .k-days span.k-out-of-month.k-selected {border: 1px solid transparent;color:#fff;background-color:#ddd;}
</style>
<script type="text/javascript" charset="utf-8">
var global_kal = null;
var frees={
    <{foreach from=$ziying.freetimeDays key=k item=day}>
    '<{$k}>' : '<{$day}>',
    <{/foreach}>
};
var leftperson={
    <{foreach from=$leftperson key=day item=countsPerson}>
    '<{$day}>' : <{$countsPerson}>,
    <{/foreach}>
};
var priceofdays={
	    <{foreach from=$priceofdays key=day item=price}>
	    '<{$day}>' : <{$price}>,
	    <{/foreach}>
	};
$(document).ready(function () {

        global_kal = new Kalendae({
            attachTo: document.getElementById("datebox"),
			months:1,
            weekStart: 1,
	    mode:'single',
            useYearNav: false,
            useMonthNav: true,
            columnHeaderFormat: "dd",
            titleFormat: "YYYY年MM月",
            blackout : function (x) {
                for(var i in frees){
            	var d1=Kalendae.moment(frees[i]);
                var d2=Kalendae.moment(frees[i]);
                d2.add(1,'days');
            	if(x.isBetween(d1,d2))
                 {  
                    return false;
                 }  
            	
            	}
                return true;
            }
         });
         $('.kalendae .k-title.k-disable-year-nav .k-btn-next-month').click(function(){
              showLeftPerson();
              showLeftPersonWhenClick();
         });
         $('.kalendae .k-title.k-disable-year-nav .k-btn-previous-month').click(function(){
              showLeftPerson();
              showLeftPersonWhenClick();
         });
         showLeftPerson();
         showLeftPersonWhenClick();
});

function showLeftPersonWhenClick(){
        $('.kalendae .k-days span.k-in-month.k-active').click(function(){
              showLeftPerson();
              var selecteday=$(this).attr('data-date');
              $("select[name='startDay']").find("option[value='"+selecteday+"']").attr("selected","selected");
        });

}
function showLeftPerson(){
	$('.k-days span.k-in-month.k-active').each(function(){
		var date=$(this).attr('data-date');
                var day=Kalendae.moment(date).format('D');
		if(leftperson[date]){
			$(this).html(day+"<br>余"+leftperson[date]+"<br>￥"+priceofdays[date]);
		}else{$(this).removeClass('k-active');}
               
	});
}
</script>


<div id="datebox"></div>
